//==use mobile base
$default-platform: MB;

$ex-support-for-mozilla: true; //FireFox
$ex-support-for-webkit: true; //Webkit
$ex-support-for-owg: true; //safari or chrome old version
$ex-support-for-webkit533: true; //Webkit533, for android 2.3.x
$ex-support-for-opera: false; //Opera
$ex-support-for-microsoft: false; //IE
$ex-support-for-ie6: false; //IE6
$ex-support-for-ie7: false; //IE7
$ex-support-for-ie8: false; //IE8
$ex-support-for-ie9: false; //IE9
$ex-support-for-ie10: false; //IE10
$ex-support-for-ie11: false; //IE11

@import "base/mixin";
@import "base/mixin/normal";
@import "mobile/fx";

//==default page color
// ...color: #8F4F30;

@mixin add-to-home {
  //Main container
  #addToHomeScreen {
    z-index: 9999;
    box-sizing: border-box;
    width: 208px;
    padding: 10px;
    font-family: Helvetica, sans-serif;
    font-size: 13px;
    line-height: 130%;
    color: #333333;
    text-align: left;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
    user-select: none;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #ffffff), color-stop(0.02, #eeeeee), color-stop(0.98, #cccccc), color-stop(1, #a3a3a3));
    background-clip: padding-box;
    border: 1px solid #505050;
    border-radius: 8px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);

    //The 'wide' class is added when the popup contains the touch icon
    &.wide {
      width: 240px;
    }

    //The balloon arrow
    .arrow {
      position: absolute;
      bottom: -9px;
      left: 50%;
      width: 16px;
      height: 16px;
      margin-left: -8px;
      background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0, rgba(204, 204, 204, 0)), color-stop(0.4, rgba(204, 204, 204, 0)), color-stop(0.4, #cccccc));
      border-color: #505050;
      border-style: solid;
      border-width: 0 1px 1px 0;
      border-bottom-right-radius: 2px;
      box-shadow: inset -1px -1px 0 #a9a9a9;
      transform: rotateZ(45deg);
    }

    //The balloon arrow for iPad
    .ipad .arrow {
      top: -9px;
      bottom: auto;
      left: 50%;
      background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0, rgba(238, 238, 238, 0)), color-stop(0.4, rgba(238, 238, 238, 0)), color-stop(0.4, #eeeeee));
      box-shadow: inset -1px -1px 0 #ffffff;
      transform: rotateZ(-135deg);
    }

    //Close button
    .close {
      position: absolute;
      top: 2px;
      right: 2px;
      box-sizing: border-box;
      width: 14px;
      height: 14px;
      font-size: 13px;
      line-height: 10px;
      color: #707070;
      text-align: center;
      text-indent: 1px;
      background: rgba(0, 0, 0, 0.12);
      border-radius: 7px;
      box-shadow: 0 1px 0 #ffffff;
    }

    //The '+' icon, displayed only on iOS < 4.2
    .plus {
      font-size: 1.3em;
      font-weight: bold;
    }

    //The 'share' icon, displayed only on iOS >= 4.2
    .share {
      display: inline-block;
      width: 18px;
      height: 15px;
      overflow: hidden;
      text-indent: -9999em;
      background-image: url();
      background-repeat: no-repeat;
      background-size: 18px 15px;
    }

    //The touch icon (if available)
    .touchIcon {
      display: block;
      float: left;
      width: 44px;
      height: 44px;
      margin: 0 10px 5px 0;
      background-repeat: none;
      background-clip: padding-box;
      background-size: 44px 44px;
      border: 1px solid #333333;
      border-radius: 8px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 0 2px rgba(255, 255, 255, 0.9);
    }

    //The 'share' icon for retina display
    @media all and (-webkit-min-device-pixel-ratio: 2) {
      #addToHomeScreen .share {
        background-image: url();
      }
    }
  }
}
